<template>
	<view class="new-users copy-data">
		<view class="mid" style="flex:1;overflow: hidden;">
			<view class="head pad30">
				<view class="user-card">
					<view class="user-info">

						<image class="avatar" src="/static/images/man.png" v-if="userInfo.sex==1 && uid"></image>
						<image class="avatar" v-else src="/static/images/women.png" mode=""></image>

						<view class="info">

							<view class="name">
								{{user.nickname}}
								<view class="vipGrade" v-if="user.grade>0">

									VIP {{user.grade}}


								</view>
							</view>
							<view class="" v-if="user.level>-1">
								<u-rate :count="5" :disabled='true' inactive-icon="star-fill" active-color="#2680ff"
									v-model="user.level"></u-rate>

							</view>
							<view class="invite">
								<div class="tit">{{$t("user.my-invitation-code")}}:{{user.invitationCode}}</div>
								<button type="primary" style="padding: 0 8px;" size="mini"
									@click="copy">{{$t("public.copy-button")}}</button>
							</view>
							

						</view>


					</view>

				</view>
				<!-- <view class="contenBox"></view> -->
			</view>
			<view class="left1">
				{{$t("user.invite-friends")}}
			</view>
			<view class="invite_box">
				<view class="big_box">
					<view class="invite_tit">
						<view class="tit">{{$t("invitation.invitation-link")}}</view>
						<view class="">
							<view class="" style="display: flex;margin-top: 10px;word-break: break-all;">
								<!-- {{this.qrcodeData}} -->
								<view class="">{{qrcodeData.url}}</view>
							</view>
							<view class="copy_btn" style="margin-top: 10px;display: flex;justify-content: flex-end;">
								<button type="primary" size="mini"
									@click="copyLink">{{$t("invitation.copy-link")}}</button>
							</view>
						</view>
					</view>

				</view>

<view class="big_box">
					<view class="invite_tit">
						<view class="tit">{{$t("Download")}}</view>
						<view class="">
							<view class="" style="display: flex;margin-top: 10px;word-break: break-all;">
								<!-- {{this.qrcodeData}} -->
								<view class="">{{qrcodeData.url1}}</view>
							</view>
							<view class="copy_btn" style="margin-top: 10px;display: flex;justify-content: flex-end;">
								<button type="primary" size="mini"
									@click="copyLink1">{{$t("invitation.copy-link")}}</button>
							</view>
						</view>
					</view>
			
				</view>
			</view>
			

			<view class="invite_box">
				<view class="big_box">
					<view class="invite_tit">
						<view class="tit">{{$t("team.invitation")}}</view>
						
						
						<!-- <view @click="preview">
						
							<canvas canvas-id="qrcodeNo" id="qrcodeNo" style="height: 500rpx;width: 500rpx;" v-if="isShow"></canvas>
							
						
							<canvas class="er_wei" canvas-id="qrcodeId" id="qrcodeId" style="width: 654rpx; height: 900rpx;"></canvas>
							
						</view> -->
						
						<view class="content"  style="display: flex;justify-content: center;">
							<view @click="preview">
								<!-- 用于生成二维码的画布 在二号画布获取生成的二维码后后会被v-if卸载掉 -->
								<canvas canvas-id="qrcodeNo" id="qrcodeNo" style="height: 500rpx;width: 500rpx;" v-if="isShow"></canvas>
								
							<!-- 	<view class="qrcodePng" v-else>
										<image :src="qrcodeData.qrcode" alt="" style="width: 100px;height: 100px;"></image>
								</view> -->
								<!-- 真正用于展示 和 截图的画布 -->
								<canvas class="er_wei" canvas-id="qrcodeId" id="qrcodeId" style="width: 654rpx; height: 900rpx;"></canvas>
								
							</view>
							
							<!-- <button class="btn" @click="saveElementContent">保存</button> -->
						</view>
						
						
					</view>
					<view class="">

					</view>
				</view>
				
			</view>
			
			
			
			<!-- <view class="content"  style="display: flex;justify-content: center;">
				<view @click="preview">
					
					<canvas canvas-id="qrcodeNo" id="qrcodeNo" style="height: 500rpx;width: 500rpx;" v-if="isShow"></canvas>
					
			
					<canvas class="er_wei" canvas-id="qrcodeId" id="qrcodeId" style="width: 654rpx; height: 900rpx;"></canvas>
					
				</view>
				
			
			</view> -->
	<!-- 		<view class=""  @click="preview">
				<view class="weilingPng">
					<image src="../../../static/images/weiling.png" mode=""></image>
					<view class="qrcodePng">
							<image :src="qrcodeData.qrcode" alt="" style="width: 100px;height: 100px;"></image>
					</view>
				</view>

			</view> -->
			<view class="share">
				<button class="btn_share" @click="saveElementContent">{{$t('DownInviteImg')}}</button>
			</view>
		</view>
		
<!-- 
		<u-popup v-model="show" mode="center">
	
			<canvas canvas-id="qrcode" style="width: 400rpx; height: 400rpx; position: relative; top: -999rpx"/>
				<canvas canvas-id="myCanvas" :style="{ height: ch, width: cw, left: cl }" v-show="canvasShow" id="myCanvas"></canvas>
		</u-popup> -->


	</view>
</template>
<script>
	import {
		invitLink
	} from '@/api/new.js';
	import {
		orderData
	} from '@/api/order.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js';
import {
		base64ToPath
	} from '@/plugin/image-tools/index.js'
	import wxcode from 'uniapp-qrcode';
	// import { uni } from 'uni-core';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();
	export default {
		computed: mapGetters(['isLogin', 'userInfo']),
		components: {
			uQRCode
		},
		data() {
			return {
				user: {},
				qrcodeData: '',
				show: false,
				qrcodeSize: 300,
				shareShow: false,
				shareUrl: '',
				isShow: true, // 控制一号画布是否隐藏
				qrcode11:'' ,
				url: "",
				showCanvas:false,
				
			
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t("user.invite-friends")
			})
			this.user = JSON.parse(uni.getStorageSync("USER_INFO"))
			
			let that = this
			invitLink().then(res => {
				this.qrcodeData = res.data
				that.url = res.data.url
				console.log(res.data, 'kkkk');
			})
			
			setTimeout(() => {
				//扫码 跳转的url
				// console.log(this.url, '11111111');
				wxcode.qrcode('qrcodeNo', this.url, 445, 445);
				const that = this
				uni.showLoading()
				uni.canvasToTempFilePath({ // 保存canvas为图片
					canvasId: 'qrcodeNo', // canvas的ID
					quality: 0.6, // 生成的图片质量 0.1-1  
					
					success(res) { // 成功回调  res.tempFilePath就是临时路径
					
						
						that.isShow = false // 获取一号画布的二维码  就卸载一号画布
						const ctx = uni.createCanvasContext('qrcodeId', that); // 获二号画布上下文对象
						const imageWidth = uni.upx2px(610); // 将px转为rpx
						const imageHeight = uni.upx2px(1000);
						const codeSize = uni.upx2px(340);
						const codeX = uni.upx2px(155);
						const codeY = uni.upx2px(215);
					
						ctx.drawImage('/static/images/poster4.jpg', 0, 0, imageWidth,imageHeight); //背景图画进去
						ctx.drawImage(res.tempFilePath, codeX, codeY, codeSize,codeSize); // 从一号画布获取的二维码也画进去
						
						// 两行显示
						ctx.fillStyle = "#f3ddbc"
						// ctx.font = 'normal 16rpx sans-serif';
						 // ctx.fillRect(85, 325, 0, 25);
						// #ifdef APP-PLUS
						ctx.font = 'normal 16rpx sans-serif';
						const txt = that.qrcode11
						const {width} = ctx.measureText(txt)
						ctx.fillRect(110,400,width+110,30)
						ctx.fillStyle="red";
						ctx.fillText(txt, 120, 420)
						// ctx.fillText(that.qrcode11, 130, 420)  原
						// #endif
						uni.hideLoading()
						// #ifdef H5
						ctx.font = 'normal 14rpx sans-serif';
						const txt = that.qrcode11
						const {width} = ctx.measureText(txt)
						console.log(width,'width');
						ctx.fillRect(50, 295,width+67,30)
						ctx.fillStyle="red";
						ctx.fillText(txt, 55, 315)
						// ctx.fillText(that.qrcode11, 85, 325) 原
						// #endif
						
						// ctx.fillText(that.qrcode11.slice(10), 187.5, 400)
					
					
						ctx.draw() // 我也是第一次用canvas 看视频学习的时候 不用调这个方法就可以绘画  uniapp一定要加 不然不画   我也不知道为啥
					
						setTimeout(() => {
							that.drawQrCode()
						}, 1000)
					}
				})
			}, 1500)
		},
		onShow: function() {
			// invitLink().then(res => {
			// 	console.log(res, 'res');
			// 	this.qrcodeData = res.data
			// })
		this.qrcode11 = this.$t('MyCode')+JSON.parse( uni.getStorageSync("USER_INFO")).invitationCode
		console.log(this.qrcode11 );

		},
		mounted() {
		
		
		},
		methods: {
			drawQrCode() {
				let that = this
				uni.createSelectorQuery()
					.in(this)
					.select('.er_wei') // 获取 .er_wei 也就是二号画板的节点
					.boundingClientRect(rect => { // 对他的布局位置请求
						const bgWidth = rect.width; // 背景图的宽度
						const bgHeight = rect.height; // 背景图的高度
						// 在这里执行截图操作，
						uni.canvasToTempFilePath({ // 保存canvas为图片
							canvasId: 'qrcodeId',
							quality: 0.5,
							
							x: 0,
							y: 0,
							width: bgWidth,
							height: bgHeight,
							success: (res) => {
								console.log(res, 'resTemppath');
								this.resTemppath = res.tempFilePath
							
							},
							fail: (err) => {
								uni.showToast({
									title: this.$t('public.save.error')
								})
							}
						})
			
					})
					.exec();
			},
		
			
			// 点击保存
			saveElementContent() {
				let that = this   
				uni.showLoading()
				uni.createSelectorQuery()
					.in(this)
					.select('.er_wei') // 获取 .er_wei 也就是二号画板的节点
					.boundingClientRect(rect => { // 对他的布局位置请求
						const bgWidth = rect.width; // 背景图的宽度
						const bgHeight = rect.height; // 背景图的高度
						// 在这里执行截图操作，
						uni.canvasToTempFilePath({ // 保存canvas为图片
							canvasId: 'qrcodeId',
							quality: 1,
							x: 0,
							y: 0,
							width: bgWidth,
							height: bgHeight,
							success: (res) => {
								uni.hideLoading()
								// this.resTemppath = res.tempFilePath
								// console.log(res, 'canvasToTempFilePath');
								uni.saveImageToPhotosAlbum({ // 保存图片到相册
									filePath: that.resTemppath, // 将二号画板截的图的临时路径作为参数
									success: () => {
										uni.showToast({
											title: this.$t('public.save.photos')
										})
									}
								})
							},
							fail: (err) => {
								uni.hideLoading()
								uni.showToast({
									title: this.$t('public.save.error')
								})
							}
						})
			
					})
					.exec();
			},
		
			/**
			 * 生成海报
			 */
			goPoster: function() {
				let that = this;
				// uni.showLoading({
				// 	title: '海报生成中',
				// 	mask: true
				// });
				// that.posters = false;
				let arrImagesUrl = '';
				let arrImagesUrlTop = '';

			},
			preview() {		
				// this.showCanvas = true
				let that = this
				
				const base64String = that.resTemppath
				// base64ToPath(base64String).then(res => {
					
				// 	});
				
					
					// console.log(that.resTemppath,'that.resTemppath');
					
				base64ToPath(base64String).then(path => {
						that.imgs = []
						
						that.imgs[0] = path
						console.log(that.imgs);
					uni.showLoading()	
				
					
				 uni.previewImage({
					urls: that.imgs,
					current: 0,
					longPressActions: {
						itemList: ['save'],
						success: function(ress) {
							console.log(ress, 'saveImageToPhotosAlbum');
							
							// const base64String = that.resTemppath
							// base64ToPath(base64String).then(res => {
								
							// 	});
								uni.saveImageToPhotosAlbum({
									filePath: that.resTemppath,
									success: function() {
			
										that.$util.Tips({
											title: that.$t('public.save.photos')
										})
									},
									fail: function() {
										that.$util.Tips({
											title: that.$t('public.save.error')
										})
									},
								})
			
						},
						fail: function(res) {
							console.log(res.errMsg, 'Msg11');
						}
					},
					});
				}).finally(()=>{
				
					uni.hideLoading()
				})
	
			},
			copyLink() {
				let that = this
				uni.setClipboardData({
					data: that.qrcodeData.url,
					success() {
						that.$util.Tips({
							title: that.$t("public.tips.copy")
						})
					}
				})
			},
			//app鏈接 複製/
			copyLink1() {
				let that = this
				uni.setClipboardData({
					data: that.qrcodeData.url1,
					success() {
						that.$util.Tips({
							title: that.$t("public.tips.copy")
						})
					}
				})
			},
			copy() {
				let that = this
				uni.setClipboardData({
					data: that.user.invitationCode,
					success() {
						that.$util.Tips({
							title: that.$t("public.tips.copy")
						})
					}
				})
			},
			share() {
		
				// uni.navigateTo({
				// 	url:'/pages/user/setting/test'
				// })
				// this.isShow = true
				
			}
		}

	}
</script>

<style lang="scss" scoped>
	// page,
	// body {
	// 	height: 100%;
	// }

	.nav {
		padding-bottom: 26rpx;
		background: #fff;
		opacity: 1;
		border-radius: 14rpx;
		width: 100%;
		margin-bottom: 30rpx;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 20%;
			margin-top: 30rpx;

			image {
				width: 82rpx;
				height: 82rpx;
			}
		}
	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 420rpx;
		background-image: url('~@/static/images/user_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.contenBox {
		// padding: 0 30rpx;
	}

	.left1 {
		color: #282828;
		font-size: 34rpx;
		font-weight: 700;
		margin: 5px 10px;
	}

	.invite_box {
		margin: 5px 10px;
		background-color: #fff;

		.big_box {
			display: flex;
			justify-content: space-between;
			padding: 15px 15px 10px;

			.invite_tit {
				// display: flex;
				// align-items: center;

				flex: 1;

				.tit {
					font-size: 34rpx;
					font-weight: 700;
				}
			}

			.copy_btn {
				display: flex;
				align-items: center
			}
		}
	}
	
	.weilingPng{
		position: relative;
		top:0;
		.qrcodePng{
			position: absolute;
			top:0;
			width:150px;
			height: 150px;
		}
	}
	.share {
		display: flex;
		justify-content: center;
		padding: 20px 0;

		.btn_share {
			width: 140px;
			height: 45px;
			line-height: 45px;
			color: #FFFFFF;
			background-color: #169bd5;
		}
	}

	.invite_user {
		margin: 10px;
		background-color: #FFFFFF;
		padding: 10px;

		.tit {
			font-size: 36rpx;
			padding: 0 0 10px;
			border-bottom: 1px solid #ccc;
			font-weight: bold;
		}

		.user_email {
			padding: 10px 0;
		}
	}

	.showList {
		margin: 10px;
		display: flex;
		justify-content: flex-end;
		color: #aaa;
	}

	.support {
		width: 219rpx;
		height: 74rpx;
		margin: 54rpx auto;
		display: block;
	}

	.title_top {
		display: flex;
		justify-content: center;
		align-items: center;

		.title_center {
			padding: 20px;
			// padding: 20px 0 0;
			font-size: 32rpx
		}
	}

	.new-users {
		display: flex;
		flex-direction: column;
		height: 100%;

		.sys-head {
			position: relative;
			width: 100%;
			background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);

			.sys-title {
				z-index: 10;
				position: relative;
				height: 43px;
				text-align: center;
				line-height: 43px;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}

		.head {
			// margin:0 10px;
			background: linear-gradient(360deg, rgba(255, 121, 49, 0) 0%, rgba(248, 74, 29, 0.82) 39%, #E93323 100%);
			padding: 25px 10rpx 0px;

			.user-card {
				position: relative;
				width: 100%;
				margin: 0 auto;

				// padding: 25rpx 0 0rpx 0;
				.user-info {
					z-index: 20;
					position: relative;
					display: flex;
					// align-items: center;
					padding: 0 0 16px;

					.avatar {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}

					.info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;
						// padding: 15rpx 0;

						.name {
							display: flex;
							// align-items: center;
							color: #000;
							// font-size: 31rpx;
							font-weight: bold;
							justify-content: space-between;

							.vipGrade {
								background-color: #f5f5f5;
								font-size: 14px;
								border-radius: 12px;
								padding: 0 3px;
								display: flex;
								align-items: center;
								
							}

							.vip {
								display: flex;
								align-items: center;
								padding: 6rpx 20rpx;
								background: rgba(0, 0, 0, 0.2);
								border-radius: 18px;
								font-size: 20rpx;
								margin-left: 12rpx;

								image {
									width: 27rpx;
									height: 27rpx;
								}
							}
						}

						.invite {
							display: flex;
							align-items: center;

							.tit {
								font-size: 12px;
								color: #000;
								margin-right: 8px;
							}
						}

						.num {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							// color: rgba(255, 255, 255, 0.6);

							image {
								width: 22rpx;
								height: 23rpx;
								margin-left: 20rpx;
							}
						}
					}

					.setting {
						width: 45rpx;
						height: 45rpx;
					}

				}


			}

			.num-wrapper {
				z-index: 30;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20;
				color: #fff;
				// background: rgba(248, 74, 29, 0.82) ;
				background-image: url('~@/static/images/user_bg.png');
				background-repeat: no-repeat;
				background-size: 100% 150%;

			}
		}

		.left {
			color: #282828;
			font-size: 34rpx;
			font-weight: 600;
			margin: 5px 0;
		}

		.order-wrapper {
			background-color: #fff;
			border-radius: 14rpx;
			padding: 20rpx 16rpx;
			position: relative;
			z-index: 11;
			margin-bottom: 15px;

			.order-hd {

				.right {
					align-items: center;
					color: #666666;
					font-size: 26rpx;

					.icon-xiangyou {
						margin-left: 5rpx;
						font-size: 24rpx;
					}
				}
			}

			.order-bd {
				display: flex;
				justify-content: space-between;
				padding: 0 15px;

				.order-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.pic {
						position: relative;
						text-align: center;

						image {
							width: 48rpx;
							height: 48rpx;
						}
					}

					.txt {
						margin-top: 15rpx;
						font-size: 26rpx;
						color: #454545;
					}
				}

			}
		}
	}
</style>